<template>
	<view>
		<view class="realname_box">
			<view class="input-box">
				<view class="labels">
					<text>姓名</text>
				</view>
				<view class="inputs">
					<u--input placeholder="请输入姓名" border="surround" v-model="name"></u--input>
				</view>
			</view>
			<view class="input-box">
				<view class="labels">
					<text>预留手机号</text>
				</view>
				<view class="inputs">
					<u--input placeholder="请输入预留手机号" border="surround" v-model="phone"></u--input>
				</view>
			</view>
			<view class="input-box">
				<view class="labels">
					<text>身份证号</text>
				</view>
				<view class="inputs">
					<u--input placeholder="请输入身份证号" border="surround" v-model="idcards"></u--input>
				</view>
			</view>
			<view class="input-box">
				<view class="labels">
					<text>银行卡号</text>
				</view>
				<view class="inputs">
					<u--input placeholder="请输入银行卡号" border="surround" v-model="bankCode"></u--input>
				</view>
			</view>
			<view class="idcard-box">
				<view class="lefts">
					<view class="top">
						<text>人像面</text>
					</view>
					<view class="bottom">
						<text>拍摄身份证人像面</text>
					</view>
				</view>
				<view class="rights">
					<u-upload :fileList="positive" @afterRead="_positive" @delete="delete_positive" name="1"
						imageMode="aspectFit" :maxCount="1" width="150" height="90">
						<image src="@/static/sfz_z.png" mode="aspectFit" style="width: 150px; height: 90px; border: 1px solid #2979ff;"></image>
					</u-upload>
				</view>
			</view>
			<view class="idcard-box">
				<view class="lefts">
					<view class="top">
						<text>国徽面</text>
					</view>
					<view class="bottom">
						<text>拍摄身份证国徽面</text>
					</view>
				</view>
				<view class="rights">
					<u-upload :fileList="reverse" @afterRead="_reverse" @delete="delete_reverse" name="2"
						imageMode="aspectFit" :maxCount="1" width="150" height="90">
						<image src="@/static/sfz_f.jpg" mode="aspectFit" style="width: 150px; height: 90px; border: 1px solid #2979ff;"></image>
					</u-upload>
				</view>
			</view>
			<view class="order" @click="_upload">
				<text class="">提交</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/js_sdk/mmmm-image-tools/index.js'
	import cityData from '@/static/js/city.js'
	var util = require('@/util/request.js');
	export default {
		data() {
			return {
				positive: [],
				positive_file: '',
				reverse: [],
				reverse_file: '',
				nmb: 0,
				show: false,
				districts: '省市区县、乡镇等',
				cityList: [],
				cityLevel1: [],
				cityLevel2: [],
				cityLevel3: [],
				name: '',
				phone: '',
				idcards: '',
				bankCode: '',
				is_set_sign: 1,
			}
		},
		onLoad() {
			this.initCityData()
		},
		onShow() {
			if (this.is_set_sign == 2) {
				uni.navigateBack({});
			}
		},
		methods: {
			// 图片上传
			async uploadFile(index, base) {
				const userinfo = uni.getStorageSync('userinfo');
				const {
					data: res
				} = await this.$myHttp({
					url: 'common/uploadFile',
					data: {
						file: base
					},
				});
				if (index == 1) {
					this.positive_file = res.data.url
				} else if (index == 2) {
					this.reverse_file = res.data.url
				}
			},
			//人像
			//添加
			_positive(e) {
				let _this = this
				pathToBase64(e.file.url)
					.then(base64 => {
						_this.uploadFile(1, base64)
						_this.positive = [{
							url: e.file.url
						}]
						_this.nmb++
					})
					.catch(error => {
						console.error(error)
					})
			},
			//删除
			delete_positive(e) {
				this.positive = []
				this.nmb--
			},
			//国徽
			_reverse(e) {
				let _this = this
				pathToBase64(e.file.url)
					.then(base64 => {
						_this.uploadFile(2, base64)
						_this.reverse = [{
							url: e.file.url
						}]
						_this.nmb++
					})
					.catch(error => {
						console.error(error)
					})
			},
			delete_reverse(e) {
				this.reverse = []
				this.nmb--
			},
			//接口
			async _upload() {
				var phoneRegex = /^1(3|4|5|7|8)\d{9}$/
				if (this.name == '') {
					uni.showToast({
						title: '请输入姓名',
						duration: 2000,
						icon: 'none'
					});
					return false
				}
				if (this.phone == '') {
					uni.showToast({
						title: '请输入预留手机号',
						duration: 2000,
						icon: 'none'
					});
					return false
				} else if(!(phoneRegex.test(this.phone))){
					uni.showToast({
						title: '预留手机号有误',
						duration: 2000,
						icon: 'none'
					});
					return false
				}
				if (this.idcards == '') {
					uni.showToast({
						title: '请输入身份证号',
						duration: 2000,
						icon: 'none'
					});
					return false
				}
				if (this.bankCode == '') {
					uni.showToast({
						title: '请输入银行卡号',
						duration: 2000,
						icon: 'none'
					});
					return false
				}
				if (this.nmb == 2) {
					uni.showLoading({
						title: '加载中'
					});
					const userinfo = uni.getStorageSync('userinfo');
					const {
						data: res
					} = await this.$myHttp({
						url: 'v1/saveIdCard',
						data: {
							front: this.positive_file,
							back: this.reverse_file,
							name: this.name,
							phone: this.phone,
							idcard: this.idcards,
							backCode: this.bankCode,
						},
					});
					if (res.code == 200) {
						userinfo.is_real_name = 2
						uni.setStorageSync('userinfo', userinfo);
						this._vivisection(res.data.data)
					} else {
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				} else {
					uni.showToast({
						title: '请上传照片',
						duration: 2000,
						icon: 'none'
					});
				}
			},
			// 活体认证
			_vivisection(urls) {
				this.is_set_sign = 2
				uni.navigateTo({
					url: '/pages/mine/realname/signweb?url=' + urls
				})
			},
			initCityData() {
				// 遍历城市js
				cityData.forEach((item1, index1) => {
					let temp2 = [];
					this.cityLevel1.push(item1.provinceName);
					let temp4 = [];
					let temp3 = [];
					// 遍历市
					item1.cities.forEach((item2, index2) => {
						temp2.push(item2.cityName);
						// 遍历区
						item2.counties.forEach((item3, index3) => {
							temp3.push(item3.countyName);
						})
						temp4[index2] = temp3;
						temp3 = [];
					})
					this.cityLevel3[index1] = temp4;
					this.cityLevel2[index1] = temp2;
				})
				// 选择器默认城市
				this.cityList.push(this.cityLevel1, this.cityLevel2[0], this.cityLevel3[0][0]);
			},
			// 选中时执行
			changeHandler(e) {
				const {
					columnIndex,
					index,
					indexs,
					value,
					values,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e;
				if (columnIndex === 0) { // 选择第一列数据时
					// 设置第二列关联数据
					picker.setColumnValues(1, this.cityLevel2[index]);
					// 设置第三列关联数据
					picker.setColumnValues(2, this.cityLevel3[index][columnIndex]);
				} else if (columnIndex === 1) { // 选择第二列数据时
					// 设置第三列关联数据
					picker.setColumnValues(2, this.cityLevel3[indexs[0]][index]);
				}
			},
			// 单击确认按钮时执行
			confirm(e) {
				this.districts = e.value[0] + e.value[1] + e.value[2]
				// 隐藏城市选择器
				this.show = false;
			},
			district() {
				console.log(111)
				this.show = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.realname_box {
		margin: 30rpx;
		
		.input-box {
			padding: 20rpx 30rpx;
			display: flex;
			justify-content: space-between;
			background-color: #fff;
			align-items: center;
			border-bottom: 1px solid #eee;
			
			.labels {
				width: 30%;
			}
			
			.inputs {
				width: 70%;
			}
		}

		.idcard-box {
			margin-top: 30rpx;
			padding: 30rpx;
			display: flex;
			background-color: #a0cfff;
			justify-content: space-between;
			align-items: center;
			
			.lefts {
				width: 50%;
				
				.top {
					font-size: 40rpx;
					font-weight: bold;
				}
				
				.bottom {
					padding-top: 20rpx;
					font-size: 28rpx;
					color: #82848a;
				}
			}
			
			.rights {
				width: 50%;
				display: flex;
				justify-items: flex-end;
			}
		}

		.order {
			background-color: #2979ff;
			margin-top: 50rpx;
			text-align: center;
			padding: 30rpx 0;
			border-radius: 10rpx;
			color: #fff;
			transition: all 0.5s;
		}

		.order:active {
			background-color: #75c3c5;
		}
	}
</style>